<template>
	<div class="customerList">
		<el-card shadow="hover">
			<div class="customer-list-search mb15">
				<el-form ref="formDataRef" :inline="true" :model="state.formData" label-width="120px" class="demo-form-inline">
					<el-row>
						<el-col :span="6">
							<el-form-item prop="keyWord" label="关键词:">
								<el-input
									style="width: 100%"
									maxlength="200"
									@keyup.enter="searchFun()"
									@blur="state.formData.keyWord = $utils.removeBilateralSpaces(state.formData.keyWord)"
									v-model="state.formData.keyWord"
									placeholder="名称、邮箱、手机号"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="source" label="来源">
								<el-select v-model="state.formData.source" @change="searchFun()" placeholder="">
									<el-option label="全部" value></el-option>
									<el-option v-for="item in state.sourceList" :key="item.id" :label="item.sourceName" :value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="isItADeal" label="是否成交">
								<el-select v-model="state.formData.isItADeal" @change="searchFun()" placeholder="">
									<el-option v-for="item in dic_yes_no" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="isSubscribe" label="是否订阅">
								<el-select v-model="state.formData.isSubscribe" @change="searchFun()" placeholder="">
									<el-option v-for="item in dic_yes_no" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="registrationTime" label="注册时间">
								<el-date-picker
									style="width: 100%"
									value-format="YYYY-MM-DD"
									v-model="state.formData.registrationTime"
									type="date"
									placeholder="选择日期"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="lastOrderTime" label="最近下单时间">
								<el-date-picker
									style="width: 100%"
									value-format="YYYY-MM-DD"
									v-model="state.formData.lastOrderTime"
									type="date"
									placeholder="选择日期"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="numberOfTransactions" label="成交次数" style="width: 100%">
								<el-input-number v-model="state.formData.numberOfTransactions" :min="0" :max="9999" controls-position="right" @change="() => {}" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="site" label="站点">
								<el-select @change="searchFun()" style="width: 100%" v-model="state.formData.site" placeholder>
									<el-option label="全部" value></el-option>
									<el-option v-for="item in state.cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item>
								<div style="padding-left: 50px">
									<el-button type="primary" @click="searchFun">搜索</el-button>
									<el-button @click="resetForm">重置</el-button>
									<span class="total">
										订单合计：{{ state.totalLength }} &ensp;金额合计：<em class="total_money" v-html="state.totalMoney"></em>
									</span>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table :data="state.tableData.data" style="width: 100%">
				<el-table-column prop="orderNumber" label="序号" show-overflow-tooltip></el-table-column>
				<el-table-column prop="email" width="250px" label="邮箱" show-overflow-tooltip></el-table-column>
				<el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
				<el-table-column prop="registrationSource" width="100px" label="注册来源" show-overflow-tooltip></el-table-column>
				<el-table-column prop="site" label="站点" show-overflow-tooltip></el-table-column>
				<el-table-column prop="country" label="国家" show-overflow-tooltip></el-table-column>
				<el-table-column prop="transactionAmount" width="120px" label="成交金额" sortable show-overflow-tooltip></el-table-column>
				<el-table-column prop="numberOfTransactions" width="120px" label="成交次数" sortable show-overflow-tooltip></el-table-column>
				<el-table-column prop="lastAmount" width="140px" label="最后一笔金额" sortable show-overflow-tooltip></el-table-column>
				<el-table-column prop="lastOrderTime" width="160px" label="最近下单时间" sortable show-overflow-tooltip></el-table-column>
				<el-table-column prop="isSubscribe" width="100px" label="是否订阅" show-overflow-tooltip></el-table-column>
				<el-table-column prop="label" width="200px" label="客户标签" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="120px" fixed="right">
					<template #default="scope">
						<el-button text type="primary" @click="toDetail(scope.row)">详情</el-button>
						<el-button text type="primary" @click="toDetail(scope.row)">订单</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current="state.tableData.page.current"
				background
				v-model:page-size="state.tableData.page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total"
			>
			</el-pagination>
		</el-card>
		<el-dialog v-model="state.detailVisible" title="客户信息" width="80%" append-to-body destroy-on-close>
			<div class="dlog_body">
				<div class="info">
					<customerDetail v-model:customerId="state.customerId" />
					<div class="info_user"></div>
					<div class="info_address"></div>
				</div>
				<div class="order"></div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.detailVisible = false">关闭</el-button>
					<!-- <el-button type="primary" @click="state.detailVisible = false">保存</el-button> -->
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup name="CustomerList">
import { ElMessage } from 'element-plus';
import customerDetail from './customerDetail.vue';
import { storeToRefs } from 'pinia';
import { useCustomerApi } from '/@/api/customer';
import { useTagsApi } from '/@/api/common/tags';
import { getCommonCityList, getCommonSourceList } from '/@/utils/commonRequest';
import { deepCopy } from '/@/utils';
import commonFunction from '/@/utils/commonFunction';
import { useTags, ENABLE_TAG } from '/@/stores/tags';
import { dic_yes_no } from '/@/stores/dic';

const storesTags = useTags();
storeToRefs(storesTags);
const { getPriceByField } = commonFunction();
const formDataRef = ref();

const state = reactive({
	detailVisible: false,
	customerId: -1,
	cityList: [],
	sourceList: [],
	labelList: [],
	totalLength: 0,
	totalMoney: '0',
	tableData: {
		data: [],
		total: 0,
		loading: false,
		page: {
			pageSize: 7,
			current: 1,
			total: 0,
		},
	},
	formData: {
		keyWord: '',
		source: '', // "" 全部
		label: '', // "" 全部
		isItADeal: '', // "" 全部
		isSubscribe: '', // "" 全部
		registrationTime: null,
		lastOrderTime: null,
		numberOfTransactions: 0,
		site: '', // "" 全部
	},
});

const { getCustomerList } = useCustomerApi();

const getList = async () => {
	try {
		let params = {
			current: state.tableData.page.current,
			pageSize: state.tableData.page.pageSize,
			dealCount: state.formData.numberOfTransactions,
			isDeal: state.formData.isItADeal === '' ? null : state.formData.isItADeal,
			isSubscribe: state.formData.isSubscribe === '' ? null : state.formData.isSubscribe,
			keyword: state.formData.keyWord,
			lastOrderDate: state.formData.lastOrderTime,
			registerDate: state.formData.registrationTime,
			siteId: state.formData.site === '' ? null : state.formData.site,
			sourceType: state.formData.source === '' ? null : state.formData.source,
			tag: state.formData.label === '' ? null : state.formData.label,
		};
		let res = await getCustomerList(params);
		if (res.code !== 200) {
			return;
		}
		state.tableData.loading = false;
		state.tableData.total = res.data.total;
		state.tableData.page = {
			pageSize: res.data.pageSize,
			current: res.data.total,
			total: res.data.total,
		};

		let tempList = [];
		let data = res.data.data;
		tempList = data.map((item, index) => {
			return {
				id: item.id,
				orderNumber: (res.data.current - 1) * 7 + index + 1,
				email: item.email,
				name: (item.firstname ? item.firstname : '') + ' ' + (item.lastname ? item.lastname : ''),
				registrationSource: item.sourceType,
				site: item.site,
				country: item.country,
				transactionAmount: item.totalOrderAmount,
				numberOfTransactions: item.totalOrderCount,
				lastAmount: item.lastOrderAmount,
				lastOrderTime: item.lastOrderTime === null ? '-' : item.lastOrderTime,
				isSubscribe: item.isSubscribe === 1 ? '已订阅' : '未订阅',
				label: item.tag,
			};
		});

		state.tableData.data = tempList;
		state.totalLength = res.data.orderCount;
		state.totalMoney =
			getPriceByField(res.data.usAmount, 'usAmount', 'Amount') +
			'&nbsp;&nbsp;' +
			getPriceByField(res.data.ukAmount, 'ukAmount', 'Amount') +
			'&nbsp;&nbsp;' +
			getPriceByField(res.data.euAmount, 'euAmount', 'Amount');
	} catch (error) {
		state.tableData.loading = false;
		ElMessage({
			type: 'error',
			message: '获取客户信息列表失败',
		});
	}
};

function searchFun() {
	state.tableData.page = {
		pageSize: state.tableData.page.pageSize,
		current: 1,
		total: state.tableData.page.total,
	};
	getList();
}

const resetForm = () => {
	formDataRef.value.resetFields();
};

async function getSiteList() {
	try {
		state.cityList = await getCommonCityList();
	} catch (error) {
		console.log('error', error);
	}
}

async function getSourceList() {
	try {
		state.sourceList = await getCommonSourceList();
	} catch (error) {
		console.log('error', error);
	}
}

async function getLabelList() {
	try {
		let res = await useTagsApi().getTagsList(ENABLE_TAG);

		if (res.code !== 200) {
			return;
		}
		state.labelList = res.data.map((item) => {
			return {
				label: item.tagName,
				value: item.id,
			};
		});
	} catch (error) {
		ElMessage({
			type: 'error',
			message: '获取标签列表失败',
		});
	}
}

const toDetail = (item) => {
	state.detailVisible = true;
	state.customerId = item.id;
};

// 分页改变
const onHandleSizeChange = (val) => {
	state.tableData.page.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val) => {
	state.tableData.page.current = val;
	getList();
};

// 页面加载时
onMounted(() => {
	getList();
	getSiteList();
	getSourceList();
	getLabelList();
});
</script>
<style lang="scss" scoped>
.customerList {
	.total {
		display: inline-block;
		padding-left: 20px;
		color: var(--el-text-color-regular);
		.total_money {
			font-style: normal;
			color: red;
		}
	}
	:deep(.dlog_body) {
		.info {
			display: flex;
		}
	}
}
</style>
